<template lang="">
  <div class="container">
    <div v-if="isLogin" class="all-login">
      <div class="line1">
        <div class="box-left">
          <div class="block box-left1">
            <div class="title"><img src="@/assets/images/appType1.png" /><span>常用应用</span></div>
            <div v-if="list" class="list">
              <div v-for="(item, index) in list1" :key="index" class="item">
                <img class="img" :src="getDynamicImage(item.icon)" />
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
            <div class="mt20" v-else>暂无</div>
          </div>
          <div class="block box-left2">
            <div class="title"><img src="@/assets/images/appType1.png" /><span>AI中心</span></div>
            <div v-if="list" class="list">
              <div v-for="(item, index) in list2" :key="index" class="item">
                <img class="img" :src="getDynamicImage(item.icon)" />
                <div class="right">
                  <div class="title">{{ item.title }}</div>
                  <div class="info">{{ item.info }}</div>
                </div>
              </div>
            </div>
            <div class="mt20" v-else>暂无应用</div>
          </div>
        </div>
        <div class="box-right block">
          <div class="title"><img src="@/assets/images/appType1.png" /><span>应用排行榜 </span></div>
          <div v-if="list" class="list">
            <div v-for="(item, index) in list3" :key="index" class="item">
              <div class="rank">
                <img v-if="index < 3" class="img" :src="getDynamicImage('rank' + (index + 1) + '.png')" />
                <div v-else class="rank-num">{{ index + 1 }}</div>
              </div>
              <img class="img" :src="getDynamicImage(item.icon)" />
              <div class="title">{{ item.title }}</div>
              <div class="right">
                <div class="info">日活跃:10000人</div>
                <div class="info">累计使用:10000人</div>
              </div>
            </div>
          </div>
          <div class="mt20" v-else>暂无排行</div>
        </div>
      </div>
      <div class="all block">
        <div class="title"><img src="@/assets/images/appType1.png" /><span>应用中心 </span></div>
        <div class="list">
          <div @click="handleApp(item)" v-for="(item, index) in appList" :key="index" class="item">
            <img class="img" :src="item.pictureUrl" />
            <div class="title">{{ item.type }}</div>
            <div class="info">{{ item.appName }}</div>
          </div>
        </div>
      </div>
    </div>
    <UnLogin :app-list="appList" v-else />
    <!-- <UnLogin1 :app-list="appList" v-else /> -->
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getAppList, addLog } from "@/api/modules/wl.js";
import { useUserStore } from "@/stores/modules/user";
import UnLogin from "./unLogin.vue";
import UnLogin1 from "./unLogin1.vue";
const userStore = useUserStore();
const appList = ref([]);
const getDynamicImage = name => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href;
};
onMounted(() => {
  isLogin.value = !!userStore.token;
  getList();
});
function getList() {
  getAppList().then(res => {
    console.log(res);
    appList.value = res.rows.appList;
  });
}
function handleApp(item) {
  console.log(item.appName);
  addLog({ appId: item.id, appName: item.appName });
  window.open(item.url, "_blank");
}
const isLogin = ref(true);
const list1 = [
  // {
  //   icon: "appItem1.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem2.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem3.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem4.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem5.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem6.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem7.png",
  //   title: "常用应用",
  //   link: ""
  // },
  // {
  //   icon: "appItem8.png",
  //   title: "常用应用",
  //   link: ""
  // }
];
const list2 = [
  // {
  //   icon: "appItem1.png",
  //   title: "agengt",
  //   info: "会议助手",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "agengt",
  //   info: "备课助手",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "agengt",
  //   info: "学习助手",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "agengt",
  //   info: "作业助手",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "基座模型",
  //   info: "deepseek 32B",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "基座模型",
  //   info: "qwg 32B",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "模型中台",
  //   info: "岭上云 AI 智研平台",
  //   link: ""
  // }
];
const list3 = [
  // {
  //   icon: "appItem1.png",
  //   title: "常用应用",
  //   info: "应用介绍",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "常用应用",
  //   info: "应用介绍",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "常用应用",
  //   info: "应用介绍",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "常用应用",
  //   info: "应用介绍",
  //   link: ""
  // },
  // {
  //   icon: "appItem1.png",
  //   title: "常用应用",
  //   info: "应用介绍",
  //   link: ""
  // }
];
</script>
<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  padding: 0 7%;
}
.all-login {
  position: relative;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  width: 100%;
  transform: translateY(-142px);
  .line1 {
    display: flex;
    gap: 30px;
    width: 100%;
  }
  .block {
    box-sizing: border-box;
    padding: 16px 32px;
    background-color: #ffffff;
    border: 1px solid #e8f2ff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    .title {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      color: #2b67b0;
      img {
        width: 30px;
        height: 28px;
        margin-right: 17px;
      }
    }
  }
  .box-left {
    flex-grow: 1;
    .box-left1 {
      min-height: 217px;
      .list {
        display: flex;
        margin-top: 33px;
        flex-wrap: wrap;
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 64px;
          margin-bottom: 20px;
          margin-right: 70px;
          .img {
            width: 64px;
            height: 64px;
            margin-bottom: 8px;
          }
          .title {
            font-size: 14px;
            color: #242424;
          }
        }
      }
    }
    .box-left2 {
      min-height: 363px;
      margin-top: 30px;
      .list {
        display: flex;
        // grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 32px;
        flex-wrap: wrap;
        .item {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          width: 246px;
          height: 106px;
          padding: 20px;
          background-color: #e3eaff;
          border-radius: 10px;
          img {
            width: 64px;
            height: 64px;
            margin-right: 16px;
          }
          .title {
            font-size: 14px;
            font-weight: 700;
            color: #000000;
          }
          .info {
            margin-top: 12px;
            font-size: 12px;
            color: #3963a6;
          }
        }
      }
    }
  }
  .box-right {
    flex-basis: 482px;
    height: 100%;
    background-color: #ffffff;
    .list {
      display: flex;
      flex-direction: column;
      margin-top: 28px;
      .item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 432px;
        height: 88px;
        padding: 12px 20px;
        margin-bottom: 12px;
        background-color: #f7f9fe;
        border-radius: 10px;
        .rank {
          img {
            width: 36px;
            height: 36px;
            margin-right: 16px;
          }
        }
        .rank-num {
          margin: 0 32px 0 8px;
          font-size: 22px;
          font-weight: 700;
        }
        .img {
          width: 64px;
          height: 64px;
          margin-right: 28px;
        }
        .title {
          margin-right: 55px;
          font-size: 14px;
          color: #000000;
        }
        .right {
          font-size: 14px;
          color: #3963a6;
          .info {
            margin-top: 4px;
          }
        }
      }
    }
  }
  .all {
    width: 100%;
    height: 393px;
    padding: 26px 33px;
    .list {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 30px 47px;
      margin-top: 37px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 64px;
          height: 64px;
        }
        .title {
          margin-top: 8px;
          font-size: 14px;
          color: #000000;
        }
        .info {
          margin-top: 5px;
          font-size: 12px;
          color: #3963a6;
        }
      }
    }
  }
}
</style>
